<!-- #layout name=blank-->
<style>
  .setting-list p.form-control-static {
    word-wrap: break-word;
    min-height: 0;
  }

  .setting-list {
    padding: 0;
    list-style: none;
  }

  .setting-list li {
    padding: 15px 0;
    border-bottom: 1px solid #eeeeee;
  }

  .setting-list li:last-child {
    border-bottom: 0;
  }

  .expand-btn {
    position: absolute;
    right: 10px;
    color: #888;
  }
</style>
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Config</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="row">
    <div class="col-md-6 col-sm-12">
      <div
        v-for="group in groups"
        :key="group.name"
      >
        <h6
          style="border-bottom: 1px solid #eeeeee; padding: 10px; position: relative"
          @click="group.expand=!group.expand"
        >
          {{group.name}}
          <span
            class="expand-btn fa"
            :class="group.expand?'fa-caret-up':'fa-caret-down'"
          ></span>
        </h6>
        <ul class="setting-list clearfix" v-show="group.expand">
          <li
            class="item clearfix"
            v-for="(setting, index) in group.items"
            :key="index"
          >
            <div class="col-md-3">
              <label class="control-label">{{ setting.name }}</label>
            </div>
            <div class="col-md-7">
              <p class="form-control-stataic">{{ setting.value }}</p>
            </div>
            <div class="col-md-2">
              <button class="btn blue" @click="onEdit(setting.name)"
                >Edit</button
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div
    class="modal fade"
    v-kb-modal="showModal"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onClose"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Edit</h4>
        </div>
        <div class="modal-body">
          <div class="alert alert-info alert-dismissable" v-if="alert">
            <strong>Tooltip</strong>
            <p style="white-space: pre-line">{{alert}}</p>
          </div>
          <div class="form-horizontal">
            <div
              class="form-group"
              v-for="(field,index) in fields"
              :key="index"
            >
              <label class="col-md-3 control-label">{{ field.name }}</label>
              <div class="col-md-9">
                <kb-switch
                  v-if="field.type=='checkbox'"
                  v-model="field.value"
                ></kb-switch>
                <span
                  v-else-if="field.type=='file'"
                  class="btn btn-default btn-file"
                  class="form-control"
                  style="width: 100%"
                >
                  {{getFileName(field.value)||Kooboo.text.common.selectFile}}
                  <input type="file" @change="getFile($event, field)" />
                </span>
                <input
                  v-else
                  :type="field.type"
                  class="form-control"
                  v-model="field.value"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn blue" @click="onSave">Save</button>
          <button class="btn gray" @click="onClose">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function () {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/SPA.js",
      "/_Admin/Scripts/lib/bootstrap-switch/bootstrap-switch.min.js",
      "/_Admin/Scripts/components/kbSwitch.js",
    ]);
    Kooboo.loadCSS([
      "/_Admin/Scripts/lib/bootstrap-switch/bootstrap-switch.min.css",
    ]);
  })();
</script>
<script src="/_Admin/View/System/CoreSettings.js"></script>
